<template>
	<view class="content">
		<!-- 加载状态显示 -->
		<view class="loading-container" v-if="isLoading">
			<view class="loading-spinner">
				<view class="loading-bounce"></view>
			</view>
			<text class="loading-text">加载中...</text>
		</view>

		<view v-else>
			<view class="success-box">
				<view class="success-icon">
					<uni-icons type="checkmarkempty" size="60" color="#e84d1c"></uni-icons>
				</view>
				<text class="title">下单成功</text>
			</view>

			<view class="btn-group">
				<button class="submit-btn" @click="goToIndex">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: true
			}
		},
		onLoad() {
			// 显示加载动画
			this.isLoading = true;
			
			// 添加延迟以展示加载效果
			setTimeout(() => {
				this.isLoading = false;
			}, 600);
		},
		methods: {
			goToIndex() {
				uni.reLaunch({
					url: '/pages/index'
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: #f8f8f8;
	}

	/* 关键帧动画定义 */
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes slideUp {
		from { 
			opacity: 0;
			transform: translateY(20rpx);
		}
		to { 
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes bounce {
		0%, 100% { 
			transform: scale(0);
		}
		50% { 
			transform: scale(1.0);
		}
	}

	@keyframes pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.05); }
		100% { transform: scale(1); }
	}

	/* 加载动画样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		animation: fadeIn 0.5s ease-out;
		
		.loading-spinner {
			width: 80rpx;
			height: 80rpx;
			position: relative;
			margin-bottom: 20rpx;
			
			.loading-bounce {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: rgba(232, 77, 28, 0.6);
				opacity: 0.6;
				position: absolute;
				top: 0;
				left: 0;
				animation: bounce 2s infinite ease-in-out;
				
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: rgba(232, 77, 28, 0.6);
					opacity: 0.6;
					animation: bounce 2s infinite ease-in-out;
					animation-delay: -1.0s;
				}
			}
		}
		
		.loading-text {
			color: #999;
			font-size: 28rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		min-height: 100vh;
	}

	.success-box {
		background: #fff;
		width: 100%;
		border-radius: 16rpx;
		padding: 60rpx 40rpx;
		margin: 120rpx 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
		animation: slideUp 0.5s ease-out;

		.success-icon {
			width: 120rpx;
			height: 120rpx;
			background: rgba(232, 77, 28, 0.1);
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			animation: pulse 2s infinite ease-in-out;
		}

		.title {
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
		}
	}

	.btn-group {
		width: 100%;
		padding: 40rpx 0;
		animation: slideUp 0.5s ease-out;
		animation-delay: 0.1s;
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #e84d1c, #f06e44);
		border-radius: 44rpx;
		box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.3);
		position: relative;
		overflow: hidden;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
		}
		
		/* 添加微光效果 */
		&:after {
			content: '';
			position: absolute;
			left: -100%;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			animation: shine 3s infinite;
		}
	}
	
	@keyframes shine {
		0% { left: -100%; }
		20% { left: 100%; }
		100% { left: 100%; }
	}
</style>
